<template>
  <div class="tagBalanceIndex">
    <c-title :hide="false" :text="diy_name"></c-title>
    <div class="headTop">
      <div class="balanceTotalBox">
        <div class="balance">¥ {{ info.totalUsable }}</div>
        <div class="txt">{{ diy_name }}总额</div>
      </div>
    </div>
    <div class="tagBox">
      <tapChild :datas="info.tag_list"></tapChild>
    </div>
    <div class="optionBox">
      <div class="options_lis" @click="toBalance" v-if="info.set && info.set.pay_open">
        <div class="top">
          <i class="iconfont icon-chongzhi2"></i>
        </div>
        <div class="bottom">充值</div>
      </div>
      <div class="options_lis" @click="toRecord">
        <div class="top">
          <i class="iconfont icon-guoqibiaoqianjilu"></i>
        </div>
        <div class="bottom">过期标签记录</div>
      </div>
    </div>
    <div class="tagDetail">
      <div class="tagDetail_top">
        <div class="tagDetail_top_l">{{ diy_name }}明细</div>
        <div class="tagDetail_top_r" @click="toAllUrl">
          查看全部
          <i class="iconfont icon-icon_more1"></i>
        </div>
      </div>
      <div class="detail">
        <div class="lis" v-for="(item, index) in info.change_log" :key="index">
          <div class="lis_top">
            <div class="lis_t_txt">{{ item.source_name }}</div>
            <div class="lis_t_price">{{ item.change_type ? "+" : "-" }}￥{{ item.change_num }}</div>
          </div>
          <div class="lis_bottom">
            <div class="lis_day">{{ item.created_at }}</div>
            <div class="lis_r" v-if="item.tag">{{ item.tag.tag_name }}：￥{{ item.after_num }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tapChild from "./components/tabLis";
export default {
  data() {
    return {
      info: [],
      diy_name: ""
    };
  },
  components: { tapChild },
  activated() {
    this.getData();
    let diyName = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting?.tag_balance?.diy_name;
    this.diy_name = diyName;
    this.fun.setWXTitle(this.diy_name);
  },
  methods: {
    toAllUrl() {
      this.$router.push(this.fun.getUrl("tagBalanceDetailed", {}));
    },
    toBalance() {
      this.$router.push(this.fun.getUrl("balance_rechargeTag", {}));
    },
    toRecord() {
      this.$router.push(this.fun.getUrl("tagBalanceRecord", {}));
    },
    getData() {
      $http.get("plugin.tag-balance.frontend.index.index", {}, "加载中..").then(response => {
        if (response.result == 1) {
          this.info = response.data;
        } else {
          this.$dialog.alert({
            message: response.msg
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tagBalanceIndex {
  background: #ffffff;
  min-height: 100vh;
}
.headTop {
  padding: 0 0.75rem;
  box-sizing: border-box;
  padding-top: 1.13rem;
  background: var(--themeBaseColor);
  .balanceTotalBox {
    padding: 1.34rem 0.94rem 0.91rem 0.94rem;
    border-radius: 0.94rem 0.94rem 0rem 0rem;
    border: 1px solid #ffffff;
    // height: 4.81rem;
    border-bottom: none;
    background: var(--themeBaseColor);
    background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/tag-balance%2Fbg%402x.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom -0.78rem right 0.97rem;
    padding-left: 0.94rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .balance {
      font-weight: bold;
      color: #ffffff;
      font-size: 1.5rem;
    }
    .txt {
      font-weight: 400;
      color: #ffffff;
      font-size: 0.75rem;
    }
  }
}
.tagBox {
  padding: 2.13rem 0.75rem;
  padding-bottom: 0;
  box-sizing: border-box;
}
.optionBox {
  margin: 0 0.63rem;
  height: 4.38rem;
  display: flex;
  align-items: center;
  margin-top: 0.63rem;
  .options_lis {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .top {
      .iconfont {
        font-size: 1.6rem;
        margin-bottom: 0.47rem;
      }
    }
  }
}
.tagDetail {
  margin: 1rem 0.88rem;
  .detail {
    .lis {
      margin: 0 0.75rem;
      padding: 0.94rem 0;
      border-bottom: 1px solid #f6f6f6;

      .lis_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.81rem;
        .lis_t_txt {
          font-size: 0.81rem;
          font-weight: bold;
        }
        .lis_t_price {
          font-size: 0.81rem;
          color: #f15353;
        }
      }
      .lis_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lis_day {
          font-size: 0.69rem;
          color: #999999;
        }
        .lis_r {
          font-size: 0.69rem;
          color: #6e6e79;
        }
      }
    }
    .lis:last-child {
      border-bottom: none;
    }
  }
  .tagDetail_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.81rem;
    .tagDetail_top_l {
      font-size: 0.94rem;
      font-weight: bold;
      color: #00001c;
    }
    .tagDetail_top_r {
      font-size: 0.81rem;
      display: flex;
      align-items: center;
      color: #6e6e79;
      .iconfont {
        color: #6e6e79;
        font-size: 0.95rem;
      }
    }
  }
}
</style>
